<template>
    <div class="app-container">
        <div class="search-container">
            <el-form
                ref="queryParamsRef"
                :inline="true"
                :model="queryParams"
                label-width="100px"
            >
                <el-form-item label="就诊时间:" prop="admissionTime">
                    <el-date-picker v-model="dateRange" :unlink-panels="true" end-placeholder="结束日期"
                                    range-separator="截止" start-placeholder="开始日期" type="daterange"
                                    @change="clinicTimeChange"></el-date-picker>
                </el-form-item>
                <el-form-item label="就诊科室" prop="deptId">
                    <base-dept-tree ref="baseDeptTreeRef" :clinicalSignStr="'5,6,9,10'" :org-id="userInfo.orgId"
                                    :value="queryParams.deptId" class="width-120" @deptSelect="deptSelect"/>
                </el-form-item>

                <el-form-item label="接诊医生" prop="deptId">
                    <user-select :id="queryParams.doctorId" ref="userSelectRef" :org-id="userInfo.orgId"
                                 class="width-120"
                                 @userChange="userChange"/>
                </el-form-item>
                <el-form-item label="患者姓名" prop="name">
                    <el-input
                        v-model="queryParams.name"
                        clearable
                        placeholder="请输入患者姓名"
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="是否住院" prop="name">
                    <el-radio-group v-model="queryParams.isHospital" @change="handleQuery">
                        <el-radio value="">全部</el-radio>
                        <el-radio v-for="dict in dictDataMap['sys_yes_no']" :key="dict.dictValue"
                                  :value="dict.dictValue">{{
                                dict.dictLabel
                            }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否急诊" prop="name">
                    <el-radio-group v-model="queryParams.isEmergency" @change="handleQuery">
                        <el-radio value="">全部</el-radio>
                        <el-radio v-for="dict in dictDataMap['sys_yes_no']" :key="dict.dictValue"
                                  :value="dict.dictValue">{{
                                dict.dictLabel
                            }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
                </el-form-item>
            </el-form>
        </div>
        <el-table
            v-adaptive="50"
            :border="true"
            :data="outpatientRecordsList"
            :header-cell-style="$headerCellStyle"
            :stripe="true"
            highlight-current-row
        >
            <el-table-column
                :align="'center'"
                class-name="small-padding fixed-width"
                fixed="left"
                label="操作"
                width="100"
            >
                <template #default="scope">
                    <el-tooltip
                        class="item"
                        content="查看病历"
                        effect="dark"
                        placement="left"
                    >
                        <el-button circle type="primary" @click="checkTheMedicalRecord(scope.row)">
                            <template #icon>
                                <i-ep-chatLineSquare/>
                            </template>
                        </el-button>
                    </el-tooltip>
                    <el-tooltip
                        class="item"
                        content="修改患者信息"
                        effect="dark"
                        placement="top"
                    >
                        <el-button circle type="success" @click="handleUpdate(scope.row)">
                            <template #icon>
                                <i-ep-edit/>
                            </template>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column :align="'left'"
                             :header-align="'center'" fixed="left" label="患者信息" prop="name" width="160">
                <template #default="scope">
                    <span class="mr5" style="color: #0032e1">{{ scope.row.name }}</span>
                    <span>
                            <svg-icon :icon-class="dictStore.getMateDictInfo(
                                dictDataMap['sys_user_sex'],
                                scope.row.sex
                            ).dictValue === '1'
                                ? 'man'
                                : 'woman'
                                " style="margin-left: 10px"/>
                        </span>
                    {{ scope.row.age }} 岁{{ scope.row.ageMonth ? scope.row.ageMonth + '月' : '' }}
                    <!-- {{ scope.row.ageDay }}天 -->
                </template>
            </el-table-column>
            <el-table-column :align="'center'" label="就诊日期" prop="visitDate" width="100">
                <template #default="scope">
                    <span>{{ $parseTime(scope.row.visitDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="是否填写传染病记录"
                prop="isCommunicableDisease"
                width="80"
            >
                <template #default="scope">
                    <dict-data-tag
                        :options="dictDataMap['sys_yes_no']"
                        :value="scope.row.isCommunicableDisease"
                    />
                </template>
            </el-table-column>
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="就诊科室"
                prop="deptName"
                width="100"
            />
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="接诊医生"
                prop="doctorName"
                width="80"
            />
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="门诊号"
                prop="clinicNo"
                width="140">
                <template #default="scope">
                    <span class="ys-css">{{ scope.row.clinicNo }}</span>
                </template>
            </el-table-column>
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="身份"
                prop="identity"
                width="80">
                <template #default="scope">
                    <dict-data-tag
                        :options="dictDataMap['profession_dict']"
                        :value="scope.row.identity"
                    />
                </template>
            </el-table-column>
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="是否初诊"
                prop="firstVisitIndicator"
                width="50"
            >
                <template #default="scope">
                    <dict-data-tag
                        :options="dictDataMap['sys_yes_no']"
                        :value="scope.row.firstVisitIndicator"
                    />
                </template>
            </el-table-column>
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="是否住院"
                prop="isHospital"
                width="50"
            >
                <template #default="scope">
                    <dict-data-tag
                        :options="dictDataMap['sys_yes_no']"
                        :value="scope.row.isHospital"
                    />
                </template>
            </el-table-column>
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="监护人"
                prop="guardianName"
                width="80"
            />
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="监护人电话"
                prop="guardianPhone"
                width="110"/>
            <el-table-column
                :align="'left'"
                :header-align="'center'"
                :show-overflow-tooltip="true"
                label="发病日期"
                prop="fabingriqi"
                width="100"
            />
            <el-table-column
                :align="'left'"
                :header-align="'center'"
                :show-overflow-tooltip="true"
                label="诊断"
                prop="diagnosisStr"
                width="180"
            />
            <el-table-column
                :align="'left'"
                :header-align="'center'"
                :show-overflow-tooltip="true"
                label="主诉"
                prop="zhusu"
            />
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="血压(mmHg)"
                prop="xueya"
                width="100">
                <template #default="scope">
                    {{ scope.row.systolicPressure }}/{{ scope.row.diastolicPressure }}
                </template>
            </el-table-column>
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="空腹血糖(mmol/L)"
                prop="fbg"
                width="100">
                <template #default="scope">
                    {{ scope.row.fbg || '/' }}
                </template>
            </el-table-column>
            <el-table-column
                :align="'left'"
                :header-align="'center'"
                :show-overflow-tooltip="true"
                label="处理意见"
                prop="dispose"
                width="110"
            />
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="身份证号"
                prop="idNo"
                width="150"
            />
            <el-table-column
                :align="'center'"
                :show-overflow-tooltip="true"
                label="联系电话"
                prop="phone"
                width="130"
            />
            <el-table-column
                :align="'left'"
                :header-align="'center'"
                :show-overflow-tooltip="true"
                label="住址"
                prop="address"
                width="260"
            />
        </el-table>
        <pagination
            v-show="total > 0"
            v-model:limit="queryParams.pageSize"
            v-model:page="queryParams.pageNum"
            :total="total"
            @pagination="getList"
        />
        <el-dialog v-model="dialogVisible" :close-on-click-modal='false' :show-close="false" @close="handleClose"
                   :width="dialogWidth">
            <template #header>
                <div class="ml20 fz15" style="color: #00c0ef">
                    <span class="mr20" style="font-size: 16px;font-weight: bold;color: #484848">{{ dialogTitle }}</span>
                    <span class="fz15 mr5" style="color: #7171ff">{{
                            patientItem.name
                        }}
                    </span>
                    <span class="mr10"><span class="mr5">{{ patientItem.age }}岁{{
                            patientItem.ageMonth
                        }}月{{ patientItem.ageDay }}天</span>
                            <svg-icon :icon-class="dictStore.getMateDictInfo(dictDataMap['sys_user_sex'], patientItem.sex)
                                .dictValue === '1'
                                ? 'man'
                                : 'woman'
                                "/>&nbsp;&nbsp;|</span>
                    <span>门诊号：<span class="ys-css">{{ patientItem.clinicNo }}&nbsp;&nbsp;|</span></span>
                    <span>收费类别：<span class="ys-css">{{
                            dictStore.getMateDictInfo(
                                dictDataMap["medical_insurance_type"],
                                patientItem.chargeType
                            )
                                ? dictStore.getMateDictInfo(
                                    dictDataMap["medical_insurance_type"],
                                    patientItem.chargeType
                                ).dictLabel
                                : ""
                        }}</span>
                    </span>
                </div>
            </template>
            <check-the-medical-record-index v-if="dialogType === 'checkTheMedicalRecordIndex'"
                                            ref="checkTheMedicalRecordRef"/>
            <patient-info v-if="dialogType === 'patientInfoIndex'" ref="patientInfoRef"/>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>

import {getOutpatientRecordsList} from "@/api/patient/clinicMaster.ts"
import {useUserStoreHook} from "@/store/modules/user.ts";
import {useDictStoreHook} from "@/store/modules/dict.ts";
import checkTheMedicalRecordIndex from "@/views/patient/patientTable/checkTheMedicalRecord/tabIndex.vue"
import patientInfo from "@/views/doctor/clinicDoctor/patientInfo.vue";

const dictStore = useDictStoreHook();
const dictDataMap = ref(dictStore.isTypeGetData('sys_yes_no', 'profession_dict', 'sys_user_sex', 'medical_insurance_type'))
const useUserStore = useUserStoreHook();
const {proxy} = getCurrentInstance() as any;
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const date = proxy.$parseTime(new Date(), "{y}-{m}-{d} ");
const dateRange = ref([date + "00:00:00", date + "23:59:59"]);
const dialogVisible = ref(false)
const active = ref(0)
const baseDeptTreeRef = ref()
const userSelectRef = ref()
const patientInfoRef = ref()
// 侧边弹出框 标题
const dialogTitle = ref("")
const dialogType = ref("")
const dialogWidth = ref("60%")
const clinicId = ref("")
const patientId = ref("")
const patientItem = ref<any>({})
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 30,
    deptId: '',
    doctorId: '',
    name: '',
    isHospital: '',
    isEmergency: '',
    orgId: userInfo.orgId

})
const total = ref(0);
const outpatientRecordsList = ref([])

const checkTheMedicalRecordRef = ref()

// 科室点击事件
function deptSelect(node: any) {
    if (!node) {
        queryParams.value.deptId = "";
    } else {
        queryParams.value.deptId = node.deptId;
    }
    getList()
}

/** 用户点击事件 */
function userChange(obj) {
    if (!obj) {
        queryParams.value.doctorId = "";
    } else {
        queryParams.value.doctorId = obj.userId;
    }
    getList()
}

function clinicTimeChange(e) {
    if (e) {
        dateRange.value = [proxy.$parseTime(e[0], "{y}-{m}-{d} 00:00:00"), proxy.$parseTime(e[1], "{y}-{m}-{d} 23:59:59")]
    }
    getList()
}


function handleQuery() {
    getList()
}

function resetQuery() {
    queryParams.value.pageNum = 1;
    baseDeptTreeRef.value.setSelectedValue();
    userSelectRef.value.setSelectedValue();
    queryParams.value.doctorId = "";
    queryParams.value.deptId = "";
    dateRange.value = [date + "00:00:00", date + "23:59:59"]
    queryParams.value.name = ''
    queryParams.value.isHospital = ''
    queryParams.value.isEmergency = ''
    handleQuery()
}

function getList() {
    getOutpatientRecordsList(proxy.$addDateRange(queryParams.value, dateRange.value)).then((res: resType) => {
        outpatientRecordsList.value = res.rows
        total.value = res.total as number
    })
}

/**
 * 修改患者信息
 */
function handleUpdate(row: any) {
    dialogType.value = "patientInfoIndex"
    patientItem.value = row
    clinicId.value = row.id
    patientId.value = row.patientId
    dialogVisible.value = true
    nextTick(() => {
        patientInfoRef.value.getCheckTheMedicalRecordMasterFun(clinicId.value, patientId.value);
    })
}

/**
 * 查看病历
 * @param row
 */
function checkTheMedicalRecord(row: any) {
    dialogType.value = "checkTheMedicalRecordIndex"
    patientItem.value = row
    clinicId.value = row.id
    patientId.value = row.patientId
    dialogVisible.value = true
    nextTick(() => {
        checkTheMedicalRecordRef.value.initOpen(toRaw(row))
    })
}

function handleClose() {
    dialogVisible.value = false
}

getList()
</script>

<script lang="ts">
export default {
  name: "PatientTable",
}
</script>


<style scoped>

</style>
